<template>
	<view style="height: 100%;">
		<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		    <!-- ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn" 此三个必须写 -->
		    <sib-list ref="sibList" @scrolltolowerFn="scrolltolowerFn" :scrollHeight="'100vh'">
		        <!-- 内部block可自定义 -->
		        <block class="" slot="sibScrollList">
		            <view class="volunteer-zixun-item" v-for="(item,i) in list" :key="i" @click="goto(item);">
		            	<view class="volunteer-zixun-item-left">
		            		<view class="volunteer-zixun-item-text" v-html="item.title"></view>
		            		<view class="volunteer-zixun-item-text1">数据看板 {{item.createdAt}}</view>
		            	</view>
						<u-lazy-load :image="item.thumb" class="img"></u-lazy-load>
		            </view>
		        </block>
		    </sib-list>
		</view>
	</view>
</template>

<script>
	import api from 'utils/api.js'
	import sibList from '@/components/sib-list/sib-list.vue'
	export default {
		components: {
		    sibList
		},
		data() {
			return {
				list: [],
				page: 1
			}
		},
		methods:{
			goto (obj) {
				uni.navigateTo({
					url: './newsDetail'
				});
				uni.setStorageSync('news',obj);
			},
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			scrolltolowerFn: function() {
			    uni.showLoading({
			        title: '加载中...',
			        mask: true
			    })
				this.page++;
				this.newsList();
			},
			newsList() {
				this.http({
					url:`${api.ServerUrlW}api/v1/article/newsList?pageNum=${this.page}&pageSize=20`,
					method:'GET',
					success: res=> {
						uni.hideLoading()
						if(res.code == 0){
							for (let s of res.result) {
								this.list.push(s)
							}
						}
					}
				})
			},
		},
		onLoad() {
			this.newsList();
		}
	}
</script>

<style lang="less" scoped>
	.volunteer-zixun-item {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #F1F1F1;
		.volunteer-zixun-item-left {
			display: inline-block;
			width: calc(100% - 130rpx);
			padding-top: 2rpx;
			padding-right: 10rpx;
			.volunteer-zixun-item-text {
				font-size: 30rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.volunteer-zixun-item-text1 {
				font-size: 24rpx;
				color: #c6c6c6;
				margin-top: 12rpx;
			}
		}
		.img {
			float: right;
			width: 130rpx;
			height: 128rpx;
		}
	}
	.volunteer-zixun-item:last-child {
		border: none;
	}
</style>
<style>
	page {
		height: 100%;
	}
</style>
